﻿@{
    ViewBag.Title = "TotalFreedom KnockoutJS MVC ";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>KnockoutJS MVC</h1>
                <h2>Library</h2>
            </hgroup>
        </div>
    </section>
}
<div class="container">

    <h3>KnockoutJS</h3>
    <p>
        <a href="http://knockoutjs.com/" target="_blank">KnockoutJS</a> is a JavaScript MVVM library to help you create rich, dynamic user interfaces with clean maintainable code.
    </p>

    <h3>Library</h3>
    <p>This library provides more tight integration between C# classes and KnockoutJS, helps to those of us who prefer to use as much C# and as little JavaScript as possible</p>
    <p>Examples for the library is in alpha state and many are not available yet. We are working on bringing them up to date, but it takes time :-) Those that are still not finished are in gray color</p>

    <h3>Benefits</h3>
    <ul>
        <li>The most important is that you find most of errors on compile time, without testing a page. Significantly decrease testing time and increase quality</li>
        <li>Second, if you try to use some of the element out of valid scope, an exception will be thrown, will let you immediately see what and where went wrong. Therefore decrease testing time and increase quality</li>        
        <li>Templates that generate names of your partial files, no need to type directory and file names. Just use generated constants</li>
    </ul>

    <h3>Get Started</h3>

    <p>Three simple steps to @Html.ActionLink("get started", "GetStarted", "Home")</p>

    <h3>Examples:</h3>

    <h4>Quick Intro</h4>
    
    <p>You want to get idea if the library is useful for you? @Html.ActionLink("Five simple examples", "QuickIntro", "Examples")</p>

    <h4>Control Flow</h4>
    <ul>
        <li>
            @Html.ActionLink("Foreach", "Foreach", "Examples")
        </li>

        <li>
            @Html.ActionLink("If", "If", "Examples")
        </li>

        <li>
            @Html.ActionLink("Ifnot", "Ifnot", "Examples")
        </li>

        <li>
            @Html.ActionLink("With", "With", "Examples")
        </li>
    </ul>

    <h4>Templates</h4>
    <ul>
        <li>
            @Html.ActionLink("Knockout Templates", "Templates", "Examples")
        </li>
        <li>
            @Html.ActionLink("File Names Templates", "FileNames", "Examples")
        </li>
        <li>
            @Html.ActionLink("Code Generation", "CodeGeneration", "Examples", null, htmlAttributes: new { style = "color: silver;" })
        </li>
    </ul>

    <h4>View Models and CRUDS</h4>
    <ul>
        <li>
            @Html.ActionLink("Create ViewModels", "ViewModels", "Examples", null, htmlAttributes: new { style = "color: silver;" })
        </li>
        <li>
            @Html.ActionLink("Create/Read/Update/Delete/Search", "Controllers", "Examples", null, htmlAttributes: new { style = "color: silver;" })
        </li>
        <li>
            @Html.ActionLink("Computed", "Computed", "Examples")
        </li>
    </ul>

    <h4>Controlling text and appearance</h4>
    <ul>
        <li>
            @Html.ActionLink("Visible", "Visible", "Examples")
        </li>

        <li>
            @Html.ActionLink("Text", "Text", "Examples")
        </li>

        <li>
            @Html.ActionLink("Html", "Html", "Examples")
        </li>

        <li>
            @Html.ActionLink("CSS", "CSS", "Examples")
        </li>

        <li>
            @Html.ActionLink("Style", "Style", "Examples")
        </li>

        <li>
            @Html.ActionLink("Attr", "Attr", "Examples")
        </li>
    </ul>

    <h4>Working with form fields</h4>
    <ul>
        <li>
            @Html.ActionLink("Value", "Value", "Examples")
        </li>
        <li>
            @Html.ActionLink("Checked", "Checked", "Examples")
        </li>
        <li>
            @Html.ActionLink("Options", "Options", "Examples")
        </li>
        <li>
            @Html.ActionLink("Selected Options", "SelectedOptions", "Examples")
        </li>
        <li>
            @Html.ActionLink("Autocomplete", "Autocomplete", "Examples", null, htmlAttributes: new { style = "color: silver;" })
        </li>
        <li>
            @Html.ActionLink("Enable", "Enable", "Examples")
        </li>
        <li>
            @Html.ActionLink("Disable", "Disable", "Examples")
        </li>
    </ul>

    <h4>Custom controls patterns, high level and helper functions</h4>
    <ul>
        <li>
            @Html.ActionLink("Custom Controls", "CustomControls", "Examples", null, htmlAttributes: new { style = "color: silver;" })
        </li>

        <li>
            @Html.ActionLink("Helper Functions", "Helper", "Examples", null, htmlAttributes: new { style = "color: silver;" })
        </li>
    </ul>

    <p>If you have any questions or proposals on how to make the library better, please let us know at <a href="http://totalfreedomko.codeplex.com/discussions">http://totalfreedomko.codeplex.com/discussions</a></p>

</div>
